<template>
  <view class="content">
    <van-nav-bar title="编辑资料" left-text="" :left-arrow="true" @click-left="onClickLeft" />
    <view class="user-info">
      <view class="user-img">
        <image class="img-box" :src="info.member_head" />
        <view class="img-upload" @click="uploadHandle">上传</view>
      </view>
      <view class="info-box">
        <view class="title">基本信息</view>
        <view class="info-list">
          <uni-forms ref="uniForm" :modelValue="info" :label-width="80" :rules="rules">
            <uni-forms-item label="用户名" required name="member_name">
              <uni-easyinput
                :inputBorder="false"
                :clearable="false"
                type="text"
                v-model="info.member_name"
                placeholder="请输入"
              />
            </uni-forms-item>
            <uni-forms-item label="手机号码" required name="member_mobile">
              <uni-easyinput
                :inputBorder="false"
                :clearable="false"
                type="number"
                v-model="info.member_mobile"
                placeholder="请输入"
              />
            </uni-forms-item>
            <uni-forms-item label="微信号码" required name="member_wx_code">
              <uni-easyinput
                :inputBorder="false"
                :clearable="false"
                type="text"
                v-model="info.member_wx_code"
                placeholder="请输入"
              />
            </uni-forms-item>
            <uni-forms-item label="地区" required name="address">
              <view @click="addressHandle">
                <uni-easyinput
                  :inputBorder="false"
                  :clearable="false"
                  type="text"
                  disabled
                  suffixIcon="forward"
                  v-model="info.address"
                  placeholder="请选择地区"
                />
              </view>
            </uni-forms-item>
            <uni-forms-item label="个人介绍" style="display: block" required name="member_desc">
              <uni-easyinput
                :inputBorder="false"
                :clearable="false"
                autoHeight
                type="textarea"
                v-model="info.member_desc"
                placeholder="请输入"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
        <view class="save-btn" @click="saveHandle">保存</view>
      </view>
    </view>
    <pickerAddress :value="addressShow" @confirm="addresspick" />
  </view>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from 'vue'
import TitlePage from '@/components/title/index'
import { getProfile, editProfile } from '@/http/user'
import { uploadImageToQiniu } from '@/utils/upload'
import { onReady } from '@dcloudio/uni-app'
import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
export default {
  components: {
    TitlePage,
    pickerAddress,
  },
  setup() {
    const uniForm = ref()
    const state = reactive({
      addressShow: false,
      info: {},
      rules: {
        member_name: {
          rules: [
            {
              required: true,
              errorMessage: '请输入用户名',
            },
          ],
        },
        member_mobile: {
          rules: [
            {
              required: true,
              errorMessage: '请输入手机号码',
            },
            {
              validateFunction: function (rule, value, data, callback) {
                if (!/^1[3-9]\d{9}$/.test(value)) {
                  callback('手机号码格式不正确')
                }
                return true
              },
            },
          ],
        },
        member_wx_code: {
          rules: [
            {
              required: true,
              errorMessage: '请输入微信号码',
            },
          ],
        },
        address: {
          rules: [
            {
              required: true,
              errorMessage: '请选择地区',
            },
          ],
        },
        member_desc: {
          rules: [
            {
              required: true,
              errorMessage: '请输入个人介绍',
            },
          ],
        },
      },
    })
    const addressHandle = () => {
      state.addressShow = true
    }
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    const getUserInfo = async () => {
      const { data } = await getProfile()
      state.info = { ...data }
    }
    onReady(() => {
      // 需要在onReady中设置规则
      uniForm.value.setRules(state.rules)
    })
    const uploadHandle = () => {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
        success: async (res) => {
          const data = await uploadImageToQiniu(res.tempFiles[0])
          state.info.member_head = `https://images.tongzhuangkc.com/${data.hash}`
        },
      })
    }
    // 保存
    const saveHandle = () => {
      uniForm.value
        .validate()
        .then(async () => {
          await editProfile(state.info)
          uni.showToast({
            title: '保存成功',
            icon: 'success',
          })
        })
        .catch((err) => {
          console.log('表单错误信息：', err)
        })
    }
    const addresspick = (obj) => {
      state.info.address = ''
      let arr = ['province', 'city', 'region']
      arr.map((key) => {
        state.info[key] = obj[key].value
        if (key === 'region') {
          state.info.address += obj[key].name
        } else {
          state.info.address += obj[key].name + '-'
        }
      })
      state.addressShow = false
    }
    onMounted(() => {
      getUserInfo()
    })
    return {
      ...toRefs(state),
      getUserInfo,
      onClickLeft,
      saveHandle,
      uniForm,
      addresspick,
      uploadHandle,
      addressHandle,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background: #fff;
}
.user-info {
  padding: 32rpx;
  .user-img {
    display: flex;
    align-items: center;
    .img-box {
      width: 144rpx;
      height: 144rpx;
      margin-right: 32rpx;
      border-radius: 50%;
    }
    .img-upload {
      width: 144rpx;
      height: 56rpx;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      color: #3775f2;
      font-size: 24rpx;
      text-align: center;
      line-height: 56rpx;
      border: 2rpx solid #3775f2;
    }
    .file-picker__box-content {
      border: 0 !important;
    }
    .uni-file-picker__list {
      display: none;
    }
  }
  .info-box {
    padding: 64rpx 0 0;
    .title {
      height: 52rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #2b303b;
      line-height: 52rpx;
      margin-bottom: 16rpx;
    }
    .save-btn {
      margin: 64rpx auto 0;
      width: 686rpx;
      height: 80rpx;
      background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
      box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(56, 122, 255, 0.4);
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      color: #fff;
      line-height: 80rpx;
      font-size: 28rpx;
      text-align: center;
    }
    .info-list {
      .uni-forms-item__label {
        color: #7f8798 !important;
      }
      .uni-easyinput__content.is-disabled {
        background: none !important;
      }
      .uni-forms-item {
        border-bottom: 2rpx solid #e8e8e8;
        &:last-child {
          display: block;
        }
      }
      .uni-easyinput__content-input {
        color: #2b303b;
        font-size: 28rpx !important;
      }
    }
  }
}
</style>
